@use '../style/base' as *;

@include bem(image) {
  @include b() {
    position: relative;
    display: inline-block;
    width: var(--sar-image-width);
    height: var(--sar-image-height);
    overflow: hidden;
    background: var(--sar-image-bg);

    @include m(circle) {
      border-radius: 9999px;
    }
  }

  @include e(display) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
  }

  @include m(animated) {
    @include e(display) {
      animation: #{bem-ns(image-fade)} var(--sar-image-fade-duration);
    }
  }

  @keyframes #{bem-ns(image-fade)} {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @include e(interaction) {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-touch-callout: none;
    user-select: none;
  }

  @include e(loading) {
    @include universal;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: var(--sar-image-loading-font-size);
    color: var(--sar-image-loading-color);
  }

  @include e(error) {
    @include universal;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: var(--sar-image-error-font-size);
    color: var(--sar-image-error-color);
  }
}
